<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/tools/unitJS.js"></script>
</head>
<body>
	<div id="warp">
		<img src="img/1.jpg" alt="">
		<div id="silder"></div>
	</div>
	<div id="content">
		<img src="img/2.jpg" alt="">
	</div>
</body>
	<script type="text/javascript">

	// 换算率

		// l : 200 / 350  ~  100 / 800;
		// t : 200 / 350  ~  100 / 800;
		
		var warp = document.getElementById('warp');
		var silder = document.getElementById('silder');
		var content = document.getElementById('content');
		var img = content.getElementsByTagName('img')[0];

		warp.onmouseenter = function(){

			silder.style.display = 'block';
			content.style.display = 'block';

			warp.onmousemove = function(e){

				var ev = e || event;
				var x = ev.clientX - warp.offsetLeft - silder.offsetWidth / 2;
				var y = ev.clientY - warp.offsetTop - silder.offsetHeight / 2;
				if (x < 0) {
					x = 0;
				}
				if (y < 0) {
					y = 0;
				}
				if (x > warp.offsetWidth - silder.offsetWidth - 2) {
					x = warp.offsetWidth - silder.offsetWidth - 2;
				}
				if (y > warp.offsetHeight - silder.offsetHeight - 2) {
					y = warp.offsetHeight - silder.offsetHeight - 2;
				}
				silder.style.left = x + 'px';
				silder.style.top = y + 'px';

				var bigX = x / 350 * 800;
				console.log(bigX);
				var bigY = y / 350 * 800;
				img.style.left = -bigX + 'px';
				img.style.top = -bigY + 'px';
			}
		}

		warp.onmouseleave = function(e){
			silder.style.display = 'none';
			content.style.display = 'none';
			warp.onmousemove = null;

		}


	</script>
</html>